<template>
	<view class="stats-container">

		<view v-if="chartPage == 0">
			<!-- 数据统计网格 -->
			<view class="stats-grid">
				<!-- 第一行 -->
				<view class="stats-row">
					<view class="stat-card highlight">
						<view class="stat-content">
							<text class="stat-value">306户</text>
							<text class="stat-label">客户数</text>
						</view>
					</view>

					<view class="stat-card highlight">
						<view class="stat-content">
							<text class="stat-value">15户</text>
							<text class="stat-label">本月新增</text>
						</view>
					</view>

					<view class="stat-card highlight">
						<view class="stat-content">
							<text class="stat-value">3户</text>
							<text class="stat-label">本月转入</text>
						</view>
					</view>

					<view class="stat-card highlight">
						<view class="stat-content">
							<text class="stat-value">1户</text>
							<text class="stat-label">本月转出</text>
						</view>
					</view>
				</view>

				<!-- 第二行 -->
				<view class="stats-row">
					<view class="stat-card highlight" @click="handleCardClick('本月新增分享')">
						<view class="stat-content">
							<text class="stat-value">1户</text>
							<text class="stat-label">本月新增分享</text>
						</view>
					</view>

					<view class="stat-card warning" @click="handleCardClick('本月流失')">
						<view class="stat-content">
							<text class="stat-value">18户</text>
							<text class="stat-label">本月流失</text>
						</view>
					</view>

					<view class="stat-card negative" @click="handleCardClick('客户留存率')">
						<view class="stat-content">
							<text class="stat-value">99.2%</text>
							<text class="stat-label">客户留存率</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 刷新按钮 -->
			<view class="refresh-section">
				<u-button type="primary" shape="circle" icon="reload" @click="refreshData" :loading="refreshing">
					{{ refreshing ? '刷新中...' : '刷新数据' }}
				</u-button>
			</view>
			<chart3Vue></chart3Vue>
			<chart2Vue></chart2Vue>
			<chart1Vue></chart1Vue>
		</view>
		<view class="" v-if="chartPage == 1">
			<chart2Vue></chart2Vue>
			<chart2Vue></chart2Vue>
			<chart4Vue></chart4Vue>
			<tables></tables>
		</view>
		<view class="" v-if="chartPage == 2">
			<chart1Vue></chart1Vue>
			<chart1Vue></chart1Vue>
			<tables></tables>
		</view>

	</view>
</template>

<script>
	import chart1Vue from './chart1.vue';
	import chart2Vue from './chart2.vue';
	import chart3Vue from './chart3.vue';
	import chart4Vue from './chart4.vue';
	import tables from "./tables.vue"
	export default {
		components: {
			chart1Vue,
			chart2Vue,
			chart3Vue,
			tables,
			chart4Vue  
		},
		props: {
			chartPage: {
				type: Number,
				default: '0',
			},

			// 文件类型, 例如['png', 'jpg', 'jpeg']

		},
		data() {
			return {
				chartPage: 0,
				currentDate: '2023年12月',
				updateTime: '2023-12-15 14:30',
				refreshing: false,
				statsData: {
					totalCustomers: 306,
					newThisMonth: 15,
					transferIn: 3,
					transferOut: 1,
					newShares: 1,
					churn: 18,
					retentionRate: 99.2
				}
			}
		},

		computed: {
			// 格式化数据用于显示
			formattedStats() {
				return {
					totalCustomers: `${this.statsData.totalCustomers}户`,
					newThisMonth: `${this.statsData.newThisMonth}户`,
					transferIn: `${this.statsData.transferIn}户`,
					transferOut: `${this.statsData.transferOut}户`,
					newShares: `${this.statsData.newShares}户`,
					churn: `${this.statsData.churn}户`,
					retentionRate: `${this.statsData.retentionRate}%`
				}
			}
		},

		onLoad() {
			this.loadStatsData();
		},

		methods: {
			// 加载统计数据
			loadStatsData() {
				// 模拟API调用
				setTimeout(() => {
					// 在实际项目中，这里调用API获取数据
					this.updateTime = this.getCurrentTime();
					uni.showToast({
						title: '数据已更新',
						icon: 'success'
					});
				}, 1000);
			},

			// 处理卡片点击事件
			handleCardClick(statName) {
				uni.showModal({
					title: statName,
					content: `查看${statName}的详细数据`,
					showCancel: true,
					confirmText: '查看详情',
					success: (res) => {
						if (res.confirm) {
							this.navigateToDetail(statName);
						}
					}
				});
			},

			// 跳转到详情页面
			navigateToDetail(statName) {
				uni.navigateTo({
					url: `/pages/stats/detail?type=${encodeURIComponent(statName)}`
				});
			},

			// 刷新数据
			refreshData() {
				this.refreshing = true;

				// 模拟数据刷新
				setTimeout(() => {
					// 在实际项目中，这里调用API刷新数据
					this.statsData = {
						totalCustomers: 306 + Math.floor(Math.random() * 10),
						newThisMonth: 15 + Math.floor(Math.random() * 5),
						transferIn: 3 + Math.floor(Math.random() * 2),
						transferOut: 1 + Math.floor(Math.random() * 2),
						newShares: 1 + Math.floor(Math.random() * 2),
						churn: 18 + Math.floor(Math.random() * 5),
						retentionRate: 99.2 + (Math.random() - 0.5) * 0.2
					};

					this.updateTime = this.getCurrentTime();
					this.refreshing = false;

					uni.showToast({
						title: '数据刷新成功',
						icon: 'success'
					});
				}, 1500);
			},

			// 获取当前时间
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stats-container {
		// background: #f5f7fa;
		// min-height: 100vh;
		padding: 20rpx;
	}

	.stats-header {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.header-content {
		background: linear-gradient(135deg, #2979ff 0%, #1e62d0 100%);
		padding: 40rpx 30rpx;
		text-align: center;
		color: white;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: 600;
		display: block;
		margin-bottom: 10rpx;
	}

	.header-subtitle {
		font-size: 24rpx;
		opacity: 0.9;
		display: block;
	}

	.stats-grid {
		// margin-bottom: 20rpx;
	}

	.stats-row {
		display: flex;
		flex-wrap: wrap;
		// margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.stat-card {
		width: calc(25% - 20rpx);
		box-sizing: border-box;
		margin: 0 10rpx 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.stat-card:active {
		transform: scale(0.95);
	}

	.stat-content {
		padding: 30rpx 20rpx;
		text-align: center;
	}

	.stat-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #2979ff;
		display: block;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 19rpx;
		color: #666;
		display: block;
	}

	// 特殊样式
	.highlight {
		background: linear-gradient(135deg, #f6ffed 0%, #f0fff4 100%);
		border: 1rpx solid #b7eb8f;
	}

	.highlight .stat-value {
		color: #52c41a;
	}

	.warning {
		background: linear-gradient(135deg, #fff7e6 0%, #fff2e8 100%);
		border: 1rpx solid #ffd591;
	}

	.warning .stat-value {
		color: #fa8c16;
	}

	.negative {
		background: linear-gradient(135deg, #fff2f0 0%, #fff0f6 100%);
		border: 1rpx solid #ffccc7;
	}

	.negative .stat-value {
		color: #ff4d4f;
	}

	.stats-footer {
		background: white;
		padding: 20rpx;
		border-radius: 12rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.footer-text {
		font-size: 22rpx;
		color: #999;
	}

	.refresh-section {
		font-size: 20rpx;
		display: flex;
		justify-content: center;
		padding: 0 10rpx;
	}

	/* 响应式设计 */
	// @media (max-width: 750px) {
	//   .stats-row {
	//     margin-bottom: 10rpx;
	//   }

	//   .stat-card {
	//     width: calc(50% - 20rpx);
	//     margin-bottom: 20rpx;
	//   }
	// }

	// @media (max-width: 480px) {
	//   .stat-card {
	//     width: calc(100% - 20rpx);
	//   }
	// }

	/* 动画效果 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.stat-card {
		animation: fadeInUp 0.5s ease forwards;
	}

	// 为每个卡片添加延迟动画
	.stat-card:nth-child(1) {
		animation-delay: 0.1s;
	}

	.stat-card:nth-child(2) {
		animation-delay: 0.2s;
	}

	.stat-card:nth-child(3) {
		animation-delay: 0.3s;
	}

	.stat-card:nth-child(4) {
		animation-delay: 0.4s;
	}

	.stat-card:nth-child(5) {
		animation-delay: 0.5s;
	}

	.stat-card:nth-child(6) {
		animation-delay: 0.6s;
	}

	.stat-card:nth-child(7) {
		animation-delay: 0.7s;
	}

	.stat-card:nth-child(8) {
		animation-delay: 0.8s;
	}
</style>